<!--
 * @Author: LHL
 * @Date: 2022-10-12 11:20:51
 * @LastEditTime: 2022-10-16 17:55:50
 * @LastEditors: lhl
 * @Description: 轮播配置页面
 * @FilePath: \新建文件夹 (2)\jep-training-trinity-group\briup-ui\src\pages\admin\carousel\List.vue
 * 别乱动！
-->
<template>
  <!-- 轮播配置页面 -->
  <div>
    <!-- 新增和预览按钮开始 -->
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="toAdd">添加</el-button>
        <el-button type="primary" @click="toWatch">预览</el-button>
      </el-form-item>
    </el-form>
    <!-- 新增和预览按钮结束 -->
    <!-- 表单数据开始 -->
    <el-table :data="swipeData" style="width: 100%" v-loading='loading'>
      <el-table-column type="index" :index="1" label="序号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="轮播图名称">
      </el-table-column>
      <el-table-column prop="introduce" label="轮播图描述">
      </el-table-column>
      <el-table-column prop="url" label="轮播图图片">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="right">
            <img slot="reference" :src="scope.row.url" alt="加载失败" width="200">
            <img :src="scope.row.url" alt="加载失败" width="400">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status=='正常'">正常</el-tag>
          <el-tag type="danger" v-else>停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="toEdit(scope.row)" size="small" color="red">编辑</el-button>
          <el-button @click="toDel(scope.row.id)" type="danger" size="small">删除</el-button>
          <!-- {{scope.row}} -->
          <el-button type="info" size="small" v-if="scope.row.status=='正常'" @click="changStatus(scope.row,'停用')">停用</el-button>
          <el-button type="primary" size="small" v-else @click="changStatus(scope.row,'启用')">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表单数据结束 -->
    <!-- 添加模态框开始 -->
    <el-dialog :title="title" :visible.sync="visible" @close="close()">
      <el-form :model="form" :rules="rules" ref="myform">
        <el-form-item label="轮播图名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="轮播图片" :label-width="formLabelWidth" prop="url">
          <el-upload class="avatar-uploader" :action="uploadFileURL" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="轮播图描述" :label-width="formLabelWidth" prop="introduce">
          <el-input v-model="form.introduce" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('myform')">重 置</el-button>
        <el-button type="primary" @click="submitForm('myform')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加模态框结束 -->
    <!-- 轮播图预览模态框开始 -->
    <el-dialog title="预览轮播图" :visible.sync="swipeVisible" width="60%">

      <template>
        <el-carousel :interval="5000" arrow="always" indicator-position="outside">
          <el-carousel-item v-for="item in statusSwipeData" :key="item.id">
            <el-image :src="item.url" fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
      </template>
    </el-dialog>
    <!-- 轮播图预览模态框结束 -->
  </div>
</template>

<script>
import { getSwipes, delSwipes, editSwipes, getStatusSwipes } from '@/api/carousel'
import { uploadFileURL } from '@/utils/config'
export default {
  data() {
    return {
      swipeVisible: false,
      formLabelWidth: '200px',
      uploadFileURL,
      imageUrl: '',
      swipeData: [],
      statusSwipeData: [],
      visible: false,
      title: '',
      rules: {
        name: [{ required: true, message: '请输入轮播图名称', trigger: 'blur' }],
        introduce: [{ required: true, message: '请输入轮播图介绍', trigger: 'blur' }],
        url: [{ required: false, message: '请输入上传图片', trigger: 'change' }]
      },
      form: {
        name: '',
        url: '',
        introduce: ''
      }
    }
  },
  computed: {},
  methods: {
    // 改变轮播图状态
    async changStatus(row, text) {
      let res = { ...row }
      if (text == '停用') {
        res.status = '停用'
        // console.log(res)
        let res1 = await editSwipes(res)
      } else {
        res.status = '正常'
        let res1 = await editSwipes(res)
      }
      this.togetSwipes()
    },
    // 关闭模态框
    close() {
      this.form = {}
      this.visible = false
    },
    // 提交按钮
    submitForm() {
      this.$refs.myform.validate(async valid => {
        if (valid) {
          let res = await editSwipes(this.form)
          this.visible = false
          this.togetSwipes()
        } else {
          return false
        }
      })
      this.form = {}
    },
    // 重置按钮
    resetForm() {
      this.form = {}
    },
    // 获取状态正常的轮播图
    async toGetStatusSwipe() {
      let status = '正常'
      let res = await getStatusSwipes({ status })
      this.statusSwipeData = res.data
      console.log(this.statusSwipeData)
    },
    // 获取所有轮播图
    async togetSwipes() {
      this.loading = true
      let res = await getSwipes()
      // console.log(res.data)
      this.swipeData = res.data
      this.loading = false
    },
    // 删除轮播图
    toDel(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(async () => {
          let res = await delSwipes({ id })
          this.$message({
            type: 'success',
            message: res.message
          })
          this.togetSwipes()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    // 编辑轮播图
    toEdit(row) {
      this.imageUrl = row.url
      this.title = '编辑轮播图信息'
      this.visible = true
      this.form = {
        ...row
      }
    },
    // 添加按钮
    toAdd() {
      this.imageUrl = ''
      this.title = '新增轮播图'
      this.visible = true
      this.form = {}
    },
    // 预览轮播图
    toWatch() {
      this.toGetStatusSwipe()
      this.swipeVisible = true
    },
    // 图片上传成功回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.url = res.data
    },
    //图片上传之前大小判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },
  created() {
    this.toGetStatusSwipe()
    this.togetSwipes()
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.el-image {
  width: 100%;
  height: 100%;
}
</style>